<template>
	<view>
		<view class="middle">
			
			<view class="scroll-view-item_H" v-for="(item,index) in list1" :key="list1.id" :id="item.id"
				:class="navIndex1==index ? 'activite' : ''" @click="checkIndex1(index)">{{item.name}}</view>
				
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
					:class="navIndex==index ? 'activite1' : ''" @click="checkIndex(index)">{{tab.name}}</view>
			</scroll-view>
			<!-- 内容切换 -->
			<view class="content1" v-if="navIndex1==0">
				<p class="p">已为您节省</p>
				<p class="money">0.00￥</p>
				<view class="flex1">
					<p class="leiJ">累计消费￥0.00</p>
					<p class="leiJ">加油总量0.00</p>
				</view>
				
			</view>
			<view class="content1" v-if="navIndex1==6">
				<p class="p">已为您节省</p>
				<p class="money">0.00￥</p>
				<view class="flex1">
					<p class="leiJ">累计消费￥0.00</p>
					<p class="leiJ">加油总量0.00</p>
				</view>
				
			</view>
			<view class="content1" v-if="navIndex1==6">
				<p class="p">已为您节省</p>
				<p class="money">0.00￥</p>
				<view class="flex1">
					<p class="leiJ">累计消费￥0.00</p>
					<p class="leiJ">加油总量0.00</p>
				</view>
				
			</view>
			<view class="content" v-if="navIndex==0">
				<p>暂无订单</p>
				<p>赶快去加油吧</p>
			</view>
			<view class="content" v-if="navIndex==3">
				sds
			</view>
			<view class="content" v-if="navIndex==4">
				sds
			</view>
			<view class="content" v-if="navIndex==5">
				ds
			</view>
		</view>
		<view class="yuan" @click="kai()">
			<image src="../../static/a.png" mode="" class="img1"></image>
			<p>开发票</p>
		</view>
	</view>


</template>
 
<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navIndex1: 0,
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}],
				list1:[
					{
						name:'加油',
						id:'jiayou'
					},
					{
						name:'券包',
						id:'quanbao'
					},
					{
						name:'会员',
						id:'vip'
					},
					{
						name:'商城',
						id:'vvv'
					},
					{
						name:'养成',
						id:'vvv'
					},
				]
			}
		},
		methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			checkIndex1(index) {
				console.log(index)
				this.navIndex1 = index;
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			kai:function(){
				uni.navigateTo({
					url:'../me/fapiao'
				})
			}
		}
	}
</script>

<style scoped>
	.flex{display: flex;justify-content: space-between;}
	.yuan{float: right;text-align: center;background-color: #fff;border-radius:50rpx;font-size:13px;padding:20rpx;margin:20rpx;}
	.img1{width:20px;height:20px;}
	.activite {
		color: red;
		border-bottom: red 3px solid;
	}
	.activite1 {
		color: red;
	}
	.content1 {
		border-radius: 25px;
		background-color: #008000;
		padding:20px 20px;
		border-radius: 15px;
	}
	.content {
		/* background-color: #008000; */
		padding:20px 20px;
		border-radius: 15px;
	}
	.p{font-size: 26rpx;}
	.money{font-size: 80rpx;color: aliceblue;font-weight: bold;}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		color: #CCCCCC;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 10px 0;
	}
	.flex1{overflow: hidden;}
	.leiJ{float: left;padding-right: 50rpx;}
</style>
 